function loadDb(name) {
  $.ajax({
    url: "load.php?a=".concat(name),
    dataType: 'json',
    type: 'GET',
    success: function (res) {
      var ht = $('#sheet').data('handsontable');
      ht.loadData(res.data)
      ht.updateSettings({colWidths: res.colWidths, colHeaders: res.colHeaders, columns: res.columns});
      $("#console").text('Data loaded');
    }
  });
}




$(document).ready(function () {
  var resizeTimeout, availableWidth, availableHeight, $window = $(window), $sheet = $('#sheet');             
  var $console = $("#console");
  var autosaveNotification;
  var calculateSize = function () {
      var offset = $sheet.offset();
      availableWidth = $window.width() - offset.left + $window.scrollLeft();
      availableHeight = $window.height() - offset.top + $window.scrollTop();
  };
  $window.on('resize', calculateSize);

  $sheet.handsontable({
    data: loadDb('start'),
    colWidths: [55, 80, 80, 80, 80, 80, 80, 55, 80, 80, 80, 80, 80, 80], //can also be a number or a function
    manualColumnResize: true,
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    columnSorting: true,
    scrollH: 'auto',
    scrollV: 'auto',
    stretchH: 'hybrid', 
    contextMenu: false,
    width: function () {
      if (availableWidth === void 0) {
          calculateSize();
      }
      return availableWidth;
    },
    height: function () {
      if (availableHeight === void 0) {
          calculateSize();
      }
      return availableHeight;
    },
    afterChange: function (change, source) {
      if (source === 'loadData') {
        return; //don't save this change
      }
      clearTimeout(autosaveNotification);

      $.each( change, function( key, value ) {
        var id = ht.getDataAtRow(value[0]).id
        if (ht.sortIndex.length != 0) {
          id = ht.getDataAtRow(ht.sortIndex[value[0]][0]).id;
        }
        var send = new Array(id, value[1], value[3]);
        $.ajax({
          url: "save.php",
          dataType: "json",
          type: "POST",
          data: {change: send}, //contains changed cells' data
          complete: function (data) {
            $console.text('Autosaved (' + change.length + ' cell' + (change.length > 1 ? 's' : '') + ')');
            autosaveNotification = setTimeout(function () {
              $console.text('Changes will be autosaved');
            }, 1000);
          }
        });
      });
    }
  });



  var handsontable = $sheet.data('handsontable');
  var ht = $sheet.handsontable('getInstance');

  

  function save() {
    $.ajax({
      url: "save.php",
      data: {"data": handsontable.getData()}, //returns all cells' data
      dataType: 'json',
      type: 'POST',
      success: function (res) {
        if (res.result === 'ok') {
          $console.text('Data saved');
        }
        else {
          $console.text('Save error');
        }
      },
      error: function () {
        $console.text('Save error. POST method is not allowed on GitHub Pages. Run this example on your own server to see the success message.');
      }
    });
  }


  $('#deelnemers').on('click', function() {loadDb('deelnemers');});
  $('#overig').on('click', function() {loadDb('overig');});
  $('#dieten').on('click', function() {loadDb('dieten');});
  $('#gezondheid').on('click', function() {loadDb('gezondheid');}); 
  $('#groepjes').on('click', function() {loadDb('groepsindeling');});   
  $('#kleuren').on('click', function() {loadDb('kleuren');});  
  $('#save').on('click', function() {save('test');});
  $('#presentie').click(function() {loadDb('presentie');});
  $('#all').click(function() {loadDb('all');});


  $('#pc').click(function() {
    $("#sheet").hide();
    $("#iframe").empty();
    $("#iframe").html("<iframe src='pc.html'></iframe>"); 
          return false;
  });

  $('.maximize').on('click', function () {
          $("#sheet").hide();
      $sheet.handsontable('render');
  });
  

  $('.drop-menu').click(function() {
    if ($('.drop-menu-content').css('visibility') == "visible") {
      $('.drop-menu-content').css('visibility', 'hidden');
    } else {
      $('.drop-menu-content').css('visibility', 'visible');
    }
    return false;
  });

  $('.head-menu').click(function() {
    $('.drop-menu-content').css('visibility', 'hidden');
    $('#sheet').show();
    $('iframe').hide();
  });

});


